Rechart v1 が使用されている運用中プロジェクトでの Aliases を使った v2 への 段階的移行
Recharts v1 が使用されている運用中プロジェクトでの v2 への 段階的移行。
とあるプロジェクトでは、次のような状態になっていました。
- Recharts は v1
- React は v18
- @types/react は v17
React と @types/react のバージョンが異なってしまった原因の 1 つとして、Rechart v1 が React 18 に対応していないことが含まれているようでした。
規模として小さいとは言えないプロジェクトの複数箇所で Rechart が使用されており、かつ 1 週間スプリントのスクラムだったため、一気にアップデートを行うのではなく段階的に Recharts をアップデートすることにしました。PR も小さくなるのでレビュワーに優しいですね。
Aliases を使って Rechart を v1 と v2 で共存させる
Aliases を使うことで複数の package をインストールすることができるため、ライブラリの段階的なアップデートができます。
# npm npm i <alias>@npm:<package-name> # pnpm pnpm add <alias>@npm:<package-name> # yarn v1 yarn add <alias>@npm:<package-name>
実際には yarn v1 を使用していたため、叩いたコマンドは次になります。
yarn add recharts-v2@npm:recharts
これで import { Line } from 'recharts-v2'; のように recharts-v2 を import 元にすると Rechart v2 を使用できるようになりました。
v1 から v2 へ置き換える
Tooltip や Label で多少複雑なことをしてはいたのですが、基本的に型を合わせていけば問題なく移行できました。デフォルトでの挙動がいくつか変わっている箇所があるので、その点は少し注意が必要になるかもしれません。実際に描画されるグラフを前のバージョンのものと見比べることを忘れないようにしましょう。
実際の置き換え作業は次のように 3 スプリントかけて段階的に行いました。
- 最初のスプリント: グラフを 1 箇所置き換える、共通化されているコンポーネントは v1 と v2 に分離
- 次のスプリント: 他のグラフへ 1 箇所ずつ横展開
- 最後のスプリント: Rechart v1 の削除、v2 の Aliases を削除して再インストール
おまけ
作業中に、あるはずの型が存在していないことに気づきました。
定義漏れだったようなので追加するコントリビュートをしました?
